<script setup>
import { Loading } from '@element-plus/icons-vue'
</script>

<template >
  <div class="flex items-center justify-center">
    <el-icon class="loading" :size="50">
      <loading />
    </el-icon>
    <span class="text-3xl ml-4">
      <slot>加载中...</slot>
    </span>
  </div>
</template>

<style lang="scss" scoped>
.loading {
  animation: rotate 2s linear -2s infinite;
  :deep(svg) {
    @apply text-5xl;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
